<template>
    <baseComponents>
        <el-row style="margin-bottom: 10px;">
            <el-breadcrumb separator="/" style="margin-bottom: 10px;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>搜索</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <div v-for="i in article" :key="i.id" class="title">
            <el-row style="height: 100px;">
                <div>
                    <el-image :src="i.face" class="img" :fit="contain" />
                </div>
                <div style="margin-top: 0px;width: 70%;margin-left: 10px;">
                    <router-link :to="{ name: 'article', query: { id: i.id } }" class="article">
                        {{ i.title }}</router-link>
                    <div class="time">
                        {{ i.time }}
                    </div>
                    <div class="intr" v-html="i.intr">

                    </div>
                </div>
            </el-row>
            <el-divider border-style="dashed" />
        </div>
        <pageComponents2Class @pageChange="handlePageChange" @siezsChange="handleSizesChange" :max=length />
    </baseComponents>
</template>

<script>
import baseComponents from '@/components/global/baseComponents.vue';
import pageComponents2Class from '@/components/global/pageComponents2Class.vue';
import { useRoute } from 'vue-router';
import $ from 'jquery';
import { ref } from 'vue';
export default {
    name: "searchArticleView",
    components: {
        baseComponents,
        pageComponents2Class,
    },
    setup() {
        let route = useRoute();
        let key = route.query.key;
        let nowPage = ref(1);
        let nowSizes = ref(10);
        let article = ref([]);
        let length = ref(0);
        let filtersText = (val) => {
            if (val != null && val != '') {
                let reg = /[\u4e00-\u9fa5]/g;
                let names = val.match(reg);
                val = names ? names.join('') : '';
                return val;
            } else return '';
        };
        let getInfo = () => {
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/article/search/",
                data: {
                    keyword: key,
                    page: nowPage.value,
                    sizes: nowSizes.value,
                },
                cache: false,
                async: false,
                success(resp) {
                    article.value = resp.article;
                    length.value = resp.length;
                    for (let i = 0; i < article.value.length; i++) {
                        if (article.value[i].content != null) {
                            let intr = filtersText(article.value[i].content);
                            article.value[i].intr = intr;
                            if (intr == '') article.value[i].intr = "暂无简介";
                        } else article.value[i].intr = "暂无简介";
                    }
                }
            })
        }
        getInfo();
        let handlePageChange = (t) => {
            nowPage.value = t;
            getInfo();
        }
        let handleSizesChange = (sizes) => {
            nowSizes.value = sizes;
            getInfo();
        }
        return {
            handlePageChange,
            handleSizesChange,
            nowPage,
            nowSizes,
            key,
            length,
            article,
        }
    }
}

</script>

<style scoped>
.title {
    width: 96%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article {
    display: inline-block;
    width: 80%;
    white-space: nowrap;
    /* 禁止文本换行 */
    overflow: hidden;
    /* 溢出部分隐藏 */
    text-overflow: ellipsis;
    /* 使用省略号表示被截断的文本 */
    text-decoration: none;
    color: black;
    font-size: larger;
    font-weight: 800;
}

.article:visited {
    text-decoration: none;
    color: black;
}

.article:hover {
    text-decoration: none;
    color: red;
}

.time {
    position: absolute;
    right: 2px;
    top: 2px;
    font-size: small;
    color: gray;
}

.img {
    width: 100px;
    height: 100%;
    border: 2px gray;
}


.intr {
    width: 600px;
    margin-left: 6px;
    font-size: 15px;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


.el-divider--horizontal {
    margin: 24px 0;
}
</style>